App Directory覚え書き

詳しく調べるので現状わかったこと

./src/app/layout.tsx

ルートレイアウト

./src/app/page.tsx

index。 App directoryでは./src/app内のディレクトリのpage.tsxを見てルーティングしてくれる

./src/app/users/を掘ってpage.tsxを作ればhttp://ROOT_URL/usersにルーティングされる

GraphQLからデータ拾いたい

デフォルトがSSR

普通にasync/awaitでデータフェッチする関数書いて呼んでやればとりあえずOK

getServerSideProps, getStaticProppsが利用不可

調べた

Server Component(デフォルト)

クライアント側ではjsを実行しない

具体的に何ができない？

onClick()等イベントハンドラの使用

useState, useEffext等状態を持つこと

localStorage等ブラウザ限定のAPIの使用

ブラウザのAPIだとかuseState等を内部で用いているカスタムフックの利用(引っかかりやすい)

デザインライブラリなんかが内部で状態管理するhook使ってると転びやすい、"use client"したファイルにインポートして再エクスポートすればいいらしいが、ハック的なのであまりやりたくない

デザインライブラリはクラス名だけで完結するtailwind cssが相性よさげか